<template>
  <div class="waterBox">
    <div class="water-content">
      <div class="water-header">
        <el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="选择年" style="width:120px;" @change="onSearch">
        </el-date-picker> {{reportTitle[titleTotal].title}}
      </div>
      <div class="canvas-box">
        <div class="waterCanvas">
          <div id="amountChart" :style="{width: '2000px', height: '650px'}"></div>
        </div>
        <div class="waterCanvas">
          <div id="totalChart" :style="{width: '2000px', height: '650px'}"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
export default {
  data() {
    return {
      year: new Date().getFullYear() + '',
      dataAmount: {
        title: { text: '2018年度水资源消耗', left: "center", textStyle: { fontSize: 15 } },
        toolbox: {
          left: '60',
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: -70
          },
          data: []
        },
        grid: {
          left: '3%',
        },
        yAxis: {
          type: 'value',
          nameGap: 50,
          name: '金额(元)',
          position: 'left',
          nameLocation: 'center',
          nameTextStyle: {
            padding: [0, 10, 0, 0]
          }
        },
        series: [{
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#1e9FFF'
            }
          },
          data: []
        }]
      },
      dataTotal: {
        title: { text: '2018年度水资源消耗', left: "center", textStyle: { fontSize: 15 } },
        toolbox: {
          left: '60',
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: -70
          },
          data: []
        },
        grid: {
          left: '3%',
        },
        yAxis: {
          type: 'value',
          nameGap: 50,
          name: '',
          position: 'left',
          nameLocation: 'center',
          nameTextStyle: {
            padding: [0, 10, 0, 0]
          }
        },
        series: [{
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#1e9FFF'
            }
          },
          data: []
        }]
      },
      titleTotal: 'WaterTotal',
      titleAmount: 'WaterAmount',
      reportTitle: {
        WaterTotal: {
          title: '年度公共机构水用量折线分析图',
          yName: '用水量(吨)'
        },
        ElectricityTotal: {
          title: '年度公共机构电用量折线分析图',
          yName: '用电量(度)'
        },
        GasTotal: {
          title: '年度公共机构燃气用量折线分析图',
          yName: '用燃气量(立方米)'
        },
        DieselTotal: {
          title: '年度公共机构燃油用量折线分析图',
          yName: '用燃油量(升)'
        },
        CoalTotal: {
          title: '年度公共机构燃煤用量折线分析图',
          yName: '用燃煤量(吨)'
        }
      }
    }
  },
  mounted() {
    this.drawLine();
  },
  beforeRouteUpdate(to, from, next) {
    this.year = new Date().getFullYear() + ''
    this.dataAmount.title.text = this.year + this.reportTitle[this.titleTotal].title;
    this.dataTotal.title.text = this.year + this.reportTitle[this.titleTotal].title;
    this.dataAmount.xAxis.data = []
    this.dataTotal.xAxis.data = []
    this.dataTotal.yAxis.name = this.reportTitle[this.titleTotal].yName
    this.titleTotal = to.params.typeTotal
    this.titleAmount = to.params.typeAmount
    next();
    this.onSearch()
  },
  methods: {
    onSearch() {
      this.init();
    },
    async init() {
      this.dataAmount.series[0].data = []
      this.dataTotal.series[0].data = []
      this.dataAmount.xAxis.data = []
      this.dataTotal.xAxis.data = []
      const result = await this.$get("/api/InstituionEnergy/statisticsByDepartment", {
        year: this.year,
        departmentName: '',
        includeChild: true
      })
      console.log(result, '123')
      if (result.length > 0) {
        if (this.titleAmount == 'DieselAmount') {
          result.map((i) => {
            this.dataAmount.xAxis.data.push(i.DepartmentName)
            this.dataTotal.xAxis.data.push(i.DepartmentName)
            this.dataAmount.series[0].data.push(i[this.titleAmount] + i.GasolineAmount)
            this.dataTotal.series[0].data.push(i[this.titleTotal] + i.GasolineTotal)
            this.drawLine()
          })
        } else {
          result.map((i) => {
            this.dataAmount.xAxis.data.push(i.DepartmentName)
            this.dataTotal.xAxis.data.push(i.DepartmentName)
            this.dataTotal.series[0].data.push(i[this.titleTotal])
            this.dataAmount.series[0].data.push(i[this.titleAmount])
            this.drawLine()
          })
        }
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let amountChart = echarts.init(document.getElementById('amountChart'))
      let totalChart = echarts.init(document.getElementById('totalChart'))
      // 绘制图表
      this.dataAmount.title.text = this.year + this.reportTitle[this.titleTotal].title;
      this.dataTotal.title.text = this.year + this.reportTitle[this.titleTotal].title;
      this.dataTotal.yAxis.name = this.reportTitle[this.titleTotal].yName
      console.log(this.dataTotal.yAxis.name)
      amountChart.setOption(this.dataAmount);
      totalChart.setOption(this.dataTotal)
    }
  },
  created() {
    this.showHome.isShow = false;
    this.onSearch();
  }
}
</script>
<style lang="scss" scoped>
.waterBox {
  width: 100%;
}

.water-content {
  display: flex;
  flex-direction: column;
  padding: 25px 15px;
  flex: 1;
  padding-bottom: 10px;
  .water-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 30px;
  }
}

.canvas-box {
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 100%;
  overflow: auto;
  .waterCanvas {
    width: 820px;
    margin-bottom: 30px;
  }
}
</style>